<template>
  <div>
    <el-container>
      <!-- 侧边栏 -->
      <el-aside :width="asideWidth" style="min-height: 100vh; background-color: #001529">
        <div style="height: 60px; color: white; display: flex; align-items: center; justify-content: center">
          <span class="logo-title" v-show="!isCollapse">数字迎新管理平台</span>
        </div>
        <el-menu :collapse="isCollapse" :collapse-transition="false" router background-color="#001529" text-color="rgba(255, 255, 255, 0.65)" active-text-color="#fff" style="border: none" :default-active="$route.path">
          <el-menu-item index="/admin/home">
              <template #title>
                  <el-icon><House /></el-icon>
                  <span>系统首页</span>
              </template>
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><Grid /></el-icon>
              <span >教务管理</span>
            </template>
             <el-menu-item index='/admin/usermsg'  v-if="role==='admin'">
              <el-icon><UserFilled /></el-icon>注册信息</el-menu-item>
              <el-menu-item index='/admin/role' v-if="role==='admin'">
              <el-icon><Avatar /></el-icon>角色信息</el-menu-item>
            <el-menu-item index='/admin/text/:privateID'>
              <el-icon><List /></el-icon>个人信息</el-menu-item>
            <el-menu-item index='/admin/greencheck' v-if="role==='admin'">
              <el-icon><BellFilled /></el-icon>绿色通道审核</el-menu-item>
            <el-menu-item index='/admin/greencstatus' v-if="role==='Visitors'">
              <el-icon><BellFilled /></el-icon>绿色通道审核状态</el-menu-item>
              <el-menu-item index='/admin/exp2' >
              <el-icon><BellFilled /></el-icon>邮箱验证</el-menu-item>
          </el-sub-menu>
          <!-- 宿舍管理 -->
          <el-sub-menu index="3" v-if="role==='admin'">
            <template #title>
              <el-icon><OfficeBuilding /></el-icon>
              <span >宿舍管理</span>
            </template>
            <el-menu-item index='/admin/StudentMgt'>
              <el-icon><User /></el-icon>学生管理</el-menu-item>
            <el-menu-item index='/admin/DormMgt'>
              <el-icon><School /></el-icon>宿舍管理</el-menu-item>
            <!-- <el-menu-item index='/admin/BuildingMgt'>
              <el-icon><Guide /></el-icon>楼栋管理</el-menu-item> -->
          </el-sub-menu>

          <!-- 权限管理-->
          <el-sub-menu index="4"  v-if="role==='admin2'">
            <template #title>
              <el-icon><Avatar /></el-icon>
              <span >权限管理</span>
            </template>
            <el-menu-item>
              <el-icon><Connection /></el-icon>用户管理</el-menu-item>
            
          </el-sub-menu>
          <!-- 文件管理-->
          <el-sub-menu index="5"  v-if="role==='admin'">
            <template #title>
              <el-icon><Folder/></el-icon>
              <span >文件管理</span>
            </template>
            <el-menu-item index="/admin/uploadfile">
              <el-icon><UploadFilled /></el-icon>文件上传</el-menu-item>
            
          </el-sub-menu>
          <!-- 日志管理-->
          <el-sub-menu index="6" v-if="role==='admin'" >
            <template #title>
              <el-icon><Histogram /></el-icon>
              <span >日志管理</span>
            </template>
            <el-menu-item index="/admin/loginlog">
              <el-icon><EditPen /></el-icon>
              操作日志
            </el-menu-item>
            <!-- <el-menu-item index="/admin/loginlog">
              <el-icon><User /></el-icon>
              登录日志
            </el-menu-item> -->
          </el-sub-menu>
          <el-menu-item index="/">
              <template #title>
                <el-icon><HomeFilled /></el-icon>
                  <span>数字迎新服务平台</span>
              </template>
          </el-menu-item>
        </el-menu>

      </el-aside>

      <el-container>
        <!-- 头部区域 -->
        <el-header>
    <i :class="collapseIcon" style="font-size: 26px" @click="handleCollapse"></i>
    <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px">
      <el-breadcrumb-item
        v-for="(breadcrumb, index) in breadcrumbs"
        :key="index"
        :to="{ path: breadcrumb.to }"
      >
        {{ breadcrumb.label }}
      </el-breadcrumb-item>
    </el-breadcrumb>

    <div style="flex: 1; width: 0; display: flex; align-items: center; justify-content: flex-end">
      <span v-if="role === 'admin'">管理员</span>
    </div>
    <div>
      <el-button type="info" @click="logoutDialogVisible=true" style="margin-left: 20px;">退出</el-button>
    </div>

    <!-- 确认退出的对话框 -->
  <el-dialog
    title="确认退出"
    v-model="logoutDialogVisible"
    width="30%"
  >
  <span>确定要退出登录吗？</span>
  <template #footer>
    <el-button @click="logoutDialogVisible = false">取消</el-button>
    <el-button type="primary" @click="confirmLogout">确定</el-button>
  </template>
  </el-dialog>
  </el-header>

        <!-- 主体区域 -->
        <el-main>
          <router-view></router-view>
        </el-main>

      </el-container>


    </el-container>
  </div>
</template>

<script>
import { ref,computed } from 'vue';
import { getRole } from '@/utils/jwt-decode';
import { useRouter } from 'vue-router';

export default {
  data() {

    return{

    }
  },

  setup() {
    const router = useRouter();

    const isCollapse = ref(false);
    const asideWidth = ref('200px');
    const collapseIcon = ref('el-icon-s-fold');
    const role= getRole();
    const logoutDialogVisible = ref(false);

    const breadcrumbs = computed(() => {
      const routeMatched = router.currentRoute.value.matched;
      const result = routeMatched
        .filter(route => route.meta && route.meta.breadcrumb)
        .map(route => ({ label: route.meta.breadcrumb, to: route.path }));
      return [{ label: '首页', to: '/admin' }, ...result];
    });

  const confirmLogout = () => {
    window.sessionStorage.clear();
    // 重定向到首页并刷新
    window.location.href = '/';
    logoutDialogVisible.value = false;
  };


    return {
      isCollapse,
      asideWidth,
      collapseIcon,
      role,
      breadcrumbs,
      logoutDialogVisible,
      confirmLogout,
    };
  },
  
};
</script>


<style scoped>
.el-menu--inline {
  background-color: #000c17 !important;
}
.el-menu--inline .el-menu-item {
  background-color: #000c17 !important;
  padding-left: 49px !important;
}
.el-menu-item:hover, .el-submenu__title:hover {
  color: #fff !important;
}
.el-submenu__title:hover i {
  color: #fff !important;
}
.el-menu-item:hover i {
  color: #fff !important;
}
.el-menu-item.is-active {
  background-color: #1890ff !important;
  border-radius: 5px !important;
  width: calc(100% - 8px);
  margin-left: 4px;
}
.el-menu-item.is-active i, .el-menu-item.is-active .el-tooltip{
  margin-left: -4px;
}
.el-menu-item {
  height: 40px !important;
  line-height: 40px !important;
}
.el-submenu__title {
  height: 40px !important;
  line-height: 40px !important;
}
.el-submenu .el-menu-item {
  min-width: 0 !important;
}
.el-menu--inline .el-menu-item.is-active {
  padding-left: 45px !important;
}
.el-aside {
  transition: width .3s;
  box-shadow: 2px 0 6px rgba(0,21,41,.35);
}
.logo-title {
  margin-left: 5px;
  font-size: 20px;
  transition: all .3s;   /* 0.3s */
}
.el-header {
  box-shadow: 2px 0 6px rgba(0,21,41,.35);
  display: flex;
  align-items: center;
}
</style>